<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>客户管理</title>
	<link rel="stylesheet" type="text/css" href="../../admin/easyui/easyui/1.3.4/themes/default/easyui.css" />
	<link rel="stylesheet" type="text/css" href="../../admin/easyui/css/wu.css" />
	<link rel="stylesheet" type="text/css" href="../../admin/easyui/css/icon.css" />
	<script type="text/javascript" src="../../admin/easyui/js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="../../admin/easyui/easyui/1.3.4/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../../admin/easyui/easyui/1.3.4/locale/easyui-lang-zh_CN.js"></script>

</head>


<body class="easyui-layout">
	<div class="easyui-layout" data-options="fit:true">
        <div id="wu-toolbar"><h2>客户列表</h2>
            <div class="wu-toolbar-button">
                <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openAddMenu()" plain="true">添加</a>
                <a href="#" class="easyui-linkbutton" iconCls="icon-bullet-edit" onclick="openEdit()"
						plain="true">编辑</a>
                        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="remove()" plain="true">删除</a>

            </div>
            <div class="wu-toolbar-search">
					<label>客户名称:</label><input id="search-name" class="wu-text" style="width:100px">
					<label>真实姓名:</label><input id="search-realName" class="wu-text" style="width:100px">
					<label>身份证号:</label><input id="search-idCard" class="wu-text" style="width:100px">
					<label>手机号码:</label><input id="search-mobile" class="wu-text" style="width:100px">
					<label>状态:</label>
					<select id="search-status" class="easyui-combobox" panelHeight="auto" style="width:120px">
						<option value="-2">全部</option>
						<option value="0">可用</option>
						<option value="-1">冻结</option>
					</select>
					<a href="#" id="search-btn" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
				</div>
			</div>
			<!-- End of toolbar -->
			<table id="data-datagrid" class="easyui-datagrid" toolbar="#wu-toolbar">
				<tbody>
					<tr>
						<td>1</td>
						<td>幸福人生</td>
						<td>123123</td>
						<td>张小肥</td>
						<td>12313213213213</td>
						<td>12896</td>
						<td>大连</td>
						<td>1</td>

					</tr>
					<tr>
						<td>2</td>
						<td>糊涂撒</td>
						<td>3123</td>
						<td>李小胖</td>
						<td>12132113213213</td>
						<td>12832336</td>
						<td>沈阳</td>
						<td>0</td>

					</tr>
				</tbody>
			</table>
		</div>
		<!-- 添加弹框 -->
		<div id="add-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'"
			style="width:420px; padding:10px;">
			<form id="add-form" method="post">
				<table>
					<tr>
						<td align="right">名称:</td>
						<td><input type="text" id="add-name" name="name" class="wu-text easyui-validatebox"
								data-options="required:true, missingMessage:'请填写客户名称'" /></td>
					</tr>
					<tr>
						<td align="right">密码:</td>
						<td><input type="password" id="add-password" name="password" class="wu-text easyui-validatebox"
								data-options="required:true, missingMessage:'请填写客户密码'" /></td>
					</tr>
					<tr>
						<td align="right">真实姓名:</td>
						<td><input type="text" id="add-realName" name="realName" class="wu-text easyui-validatebox" />
						</td>
					</tr>
					<tr>
						<td align="right">身份证号:</td>
						<td><input type="text" id="add-idCard" name="idCard" class="wu-text easyui-validatebox" /></td>
					</tr>
					<tr>
						<td align="right">手机号码:</td>
						<td><input type="text" id="add-mobile" name="mobile" class="wu-text easyui-validatebox" /></td>
					</tr>
					<tr>
						<td align="right">联系地址:</td>
						<td><input type="text" id="add-address" name="address" class="wu-text easyui-validatebox" />
						</td>
					</tr>
					<tr>
						<td align="right">状态:</td>
						<td>
							<select id="add-status" name="status" class="easyui-combobox" panelHeight="auto"
								style="width:268px" data-options="required:true, missingMessage:'请选择状态'">
								<option value="0">可用</option>
								<option value="-1">冻结</option>
							</select>
						</td>
					</tr>
				</table>
			</form>
		</div>
		<!-- 修改窗口 -->
		<div id="edit-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'"
			style="width:450px; padding:10px;">
			<form id="edit-form" method="post">
				<input type="hidden" name="id" id="edit-id">
				<table>
					<tr>
						<td align="right">名称:</td>
						<td><input type="text" id="edit-name" name="name" class="wu-text easyui-validatebox"
								data-options="required:true, missingMessage:'请填写客户名称'" /></td>
					</tr>
					<tr>
						<td align="right">密码:</td>
						<td><input type="password" id="edit-password" name="password" class="wu-text easyui-validatebox"
								data-options="required:true, missingMessage:'请填写客户密码'" /></td>
					</tr>
					<tr>
						<td align="right">真实姓名:</td>
						<td><input type="text" id="edit-realName" name="realName" class="wu-text easyui-validatebox" />
						</td>
					</tr>
					<tr>
						<td align="right">身份证号:</td>
						<td><input type="text" id="edit-idCard" name="idCard" class="wu-text easyui-validatebox" /></td>
					</tr>
					<tr>
						<td align="right">手机号码:</td>
						<td><input type="text" id="edit-mobile" name="mobile" class="wu-text easyui-validatebox" /></td>
					</tr>
					<tr>
						<td align="right">联系地址:</td>
						<td><input type="text" id="edit-address" name="address" class="wu-text easyui-validatebox" />
						</td>
					</tr>
					<tr>
						<td align="right">状态:</td>
						<td>
							<select id="edit-status" name="status" class="easyui-combobox" panelHeight="auto"
								style="width:268px">
								<option value="0">可用</option>
								<option value="-1">冻结</option>
							</select>
						</td>
					</tr>
				</table>
			</form>
		</div>

	</div>
	

	<!-- End of easyui-dialog -->
<script type="text/javascript">
	/**
	*  添加记录
	*/
	function add() {
		var validate = $("#add-form").form("validate");
		if (!validate) {
			$.messager.alert("消息提醒", "请检查你输入的数据!", "warning");
			return;
		}
		var data = $("#add-form").serialize();
		$.ajax({
			url: 'add',
			dataType: 'json',
			type: 'post',
			data: data,
			success: function (data) {
				if (data.type == 'success') {
					$.messager.alert('信息提示', '添加成功！', 'info');
					$("#add-name").val('');
					$("#add-remark").val('');
					$('#add-dialog').dialog('close');
					$('#data-datagrid').datagrid('reload');
				} else {
					$.messager.alert('信息提示', data.msg, 'warning');
				}
			}
		});
	}

	/**
	* 编辑记录
	*/
	function edit() {
		var validate = $("#edit-form").form("validate");
		if (!validate) {
			$.messager.alert("消息提醒", "请检查你输入的数据!", "warning");
			return;
		}
		var data = $("#edit-form").serialize();
		$.ajax({
			url: 'edit',
			dataType: 'json',
			type: 'post',
			data: data,
			success: function (data) {
				if (data.type == 'success') {
					$.messager.alert('信息提示', '修改成功！', 'info');
					$('#edit-dialog').dialog('close');
					$('#data-datagrid').datagrid('reload');
				} else {
					$.messager.alert('信息提示', data.msg, 'warning');
				}
			}
		});
	}


	/**
	* 删除记录
	*/
	function remove() {
		$.messager.confirm('信息提示', '确定要删除该记录？', function (result) {
			if (result) {
				var item = $('#data-datagrid').datagrid('getSelected');
				if (item == null || item.length == 0) {
					$.messager.alert('信息提示', '请选择要删除的数据！', 'info');
					return;
				}

				$.ajax({
					url: 'delete',
					dataType: 'json',
					type: 'post',
					data: { id: item.id },
					success: function (data) {
						if (data.type == 'success') {
							$.messager.alert('信息提示', '删除成功！', 'info');
							$('#data-datagrid').datagrid('reload');
						} else {
							$.messager.alert('信息提示', data.msg, 'warning');
						}
					}
				});
			}
		});
	}

	/**
	* Name 打开编辑窗口
	*/
	function openEdit() {
		//$('#add-form').form('clear');
		var item = $('#data-datagrid').datagrid('getSelected');
		if (item == null || item.length == 0) {
			$.messager.alert('信息提示', '请选择要编辑的数据！', 'info');
			return;
		}
		$('#edit-dialog').dialog({
			closed: false,
			modal: true,
			title: "编辑客户信息",
			buttons: [{
				text: '确定',
				iconCls: 'icon-ok',
				handler: edit
			}, {
				text: '取消',
				iconCls: 'icon-cancel',
				handler: function () {
					$('#edit-dialog').dialog('close');
				}
			}],
			onBeforeOpen: function () {
				//$("#add-form input").val('');
				$("#edit-id").val(item.id);
				$("#edit-name").val(item.name);
				$("#edit-password").val(item.password);
				$("#edit-realName").val(item.realName);
				$("#edit-idCard").val(item.idCard);
				$("#edit-mobile").val(item.mobile);
				$("#edit-status").combobox('setValue', item.status);
				$("#edit-address").val(item.address);
			}
		});
	}

	/**
	* Name 打开添加窗口
	*/
	function openAdd() {
		//$('#add-form').form('clear');
		$('#add-dialog').dialog({
			closed: false,
			modal: true,
			title: "添加客户信息",
			buttons: [{
				text: '确定',
				iconCls: 'icon-ok',
				handler: add
			}, {
				text: '取消',
				iconCls: 'icon-cancel',
				handler: function () {
					$('#add-dialog').dialog('close');
				}
			}],
			onBeforeOpen: function () {
				$("#add-form input").val('');

			}
		});
	}

	//搜索按钮监听
	$("#search-btn").click(function () {
		var option = { name: $("#search-name").val() };
		var status = $("#search-status").combobox('getValue');
		if (status != -2) {
			option.status = status;
		}
		option.realName = $("#search-realName").val();
		option.idCard = $("#search-idCard").val();
		option.mobile = $("#search-mobile").val();
		$('#data-datagrid').datagrid('reload', option);
	});


	/** 
	* 载入数据
	*/
	$('#data-datagrid').datagrid({
		url: 'list',
		rownumbers: true,
		singleSelect: true,
		pageSize: 20,
		pagination: true,
		multiSort: true,
		fitColumns: true,
		idField: 'id',
		treeField: 'name',
		fit: true,
		columns: [[
			{ field: 'chk', checkbox: true },
			{ field: 'name', title: '名称', width: 100, sortable: true },
			{ field: 'password', title: '密码', width: 100, sortable: true },
			{ field: 'realName', title: '真实姓名', width: 100, sortable: true },
			{ field: 'idCard', title: '身份证号', width: 100, sortable: true },
			{ field: 'mobile', title: '手机号', width: 100, sortable: true },
			{ field: 'address', title: '地址', width: 100, sortable: true },
			{
				field: 'status', title: '状态', width: 100, formatter: function (value, row, index) {
					switch (value) {
						case 0: {
							return '可用';
						}
						case -1: {
							return '冻结';
						}
					}
					return value;
				}
			}
		]]
	});
</script>
</body>

</html>